<template>
	<view>
		<uni-nav-bar :border="false" :fixed="true" :statusBar="true" @clickRight="openAddInput">
			<view class="flex align-center justify-center font-weight-bold w-100">
				<view v-for="(item,index) in tabBars" :key="index" class="mx-1" :class="tabIndex === index ? 'font-lg text-main' : 'font-md text-light-muted'"
				 @click="changeTab(index)">{{item.name}}</view>
			</view>
			<text slot="right" class="iconfont icon-fatie_icon"></text>
		</uni-nav-bar>
		<swiper :current="tabIndex" :duration="150" :style="'height:'+scrollH+'px;'" @change="onChangeTab">
			<!-- 关注列表 -->
			<swiper-item>
				<scroll-view scroll-y="true" :style="'height:'+scrollH+'px;'" @scrolltolower="loadmoreEvent">
					<block v-for="(item,index) in list" :key="index">
						<!-- 列表组件 -->
						<common-list :item="item" :index="index" @doSupport="doSupport"></common-list>
						<!-- 分割线组件 -->
						<divider></divider>
					</block>
					<load-more :loadmore="loadmore"></load-more>
				</scroll-view>
			</swiper-item>
			<!-- 话题列表 -->
			<swiper-item>
				<scroll-view scroll-y="true" :style="'height:'+scrollH+'px;'">
					<!-- 热门分类 -->
					<hot-cate :hotCate="hotCate"></hot-cate>
					<!-- 搜索框 -->
					<view class="p-2">
						<view class="flex align-center justify-center font-md bg-light rounded py-2 text-secondary" @click="openSearch">
							<text class="iconfont icon-sousuo mr-2"></text>
							搜索话题
						</view>
					</view>
					<!-- 轮播图 -->
					<swiper class="px-2 pb-2" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="200">
						<swiper-item>
							<image src="/static/demo/banner2.jpg" style="height: 300rpx;" class="w-100 rounded"></image>
						</swiper-item>
					</swiper>
					<!-- 分割线 -->
					<divider></divider>
					<!-- 最近更新 -->
					<view class="p-2 font-md">最近更新</view>
					<!-- 话题列表组件 -->
					<block v-for="(item,index) in topicList" :key="index">
						<topic-list :item="item" :index="index"></topic-list>
					</block>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	const demo = [{
		username: "昵称1",
		userpic: "/static/default.jpg",
		newstime: "2019-10-20 下午04:30",
		isFollow: true,
		title: "我是标题1",
		titlepic: "/static/demo/datapic/11.jpg",
		support: {
			type: "support",
			support_count: 1,
			unsupport_count: 2
		},
		comment_count: 2,
		share_num: 2
	}, {
		username: "昵称2",
		userpic: "/static/default.jpg",
		newstime: "2019-10-20 下午04:30",
		isFollow: true,
		title: "我是标题2",
		titlepic: "/static/demo/datapic/11.jpg",
		support: {
			type: "unsupport",
			support_count: 1,
			unsupport_count: 2
		},
		comment_count: 2,
		share_num: 2
	}, {
		username: "昵称3",
		userpic: "/static/default.jpg",
		newstime: "2019-10-20 下午04:30",
		isFollow: true,
		title: "我是标题3",
		titlepic: "/static/demo/datapic/11.jpg",
		support: {
			type: "",
			support_count: 1,
			unsupport_count: 2
		},
		comment_count: 2,
		share_num: 2
	}]
	import uniNavBar from '@/components/uni-ui/uni-nav-bar/uni-nav-bar.vue';
	import commonList from '@/components/common/common-list.vue'
	import loadMore from '@/components/common/loadmore.vue'
	import divider from '@/components/common/divider.vue'
	import hotCate from '@/components/news/hot-cate.vue'
	import topicList from '@/components/news/topic-list.vue';

	export default {
		components: {
			uniNavBar,
			commonList,
			loadMore,
			divider,
			hotCate,
			topicList
		},
		data() {
			return {
				scrollH: 50,
				// 当前激活的选项卡
				tabIndex: 0,
				tabBars: [{
					name: "关注"
				}, {
					name: "话题"
				}],
				list: [],
				// 1.上拉加载更多 2.加载中... 3.没有更多了
				loadmore: "上拉加载更多",
				hotCate: [{
					name: '关注'
				}, {
					name: '推荐'
				}, {
					name: '体育'
				}, {
					name: '热点'
				}, {
					name: '财经'
				}, {
					name: '娱乐'
				}],
				// 话题列表
				topicList: [{
					cover: '/static/demo/topicpic/1.jpeg',
					title: '话题名称1',
					desc: '话题描述1',
					news_count: 10,
					today_count: 10
				}, {
					cover: '/static/demo/topicpic/3.jpeg',
					title: '话题名称2',
					desc: '话题描述2',
					news_count: 10,
					today_count: 10
				}, {
					cover: '/static/demo/topicpic/4.jpeg',
					title: '话题名称3',
					desc: '话题描述3',
					news_count: 10,
					today_count: 10
				}, {
					cover: '/static/demo/topicpic/5.jpeg',
					title: '话题名称4',
					desc: '话题描述4',
					news_count: 10,
					today_count: 10
				}, {
					cover: '/static/demo/topicpic/6.jpeg',
					title: '话题名称5',
					desc: '话题描述5',
					news_count: 10,
					today_count: 10
				}, {
					cover: '/static/demo/topicpic/7.jpeg',
					title: '话题名称6',
					desc: '话题描述6',
					news_count: 10,
					today_count: 10
				}, {
					cover: '/static/demo/topicpic/8.jpeg',
					title: '话题名称7',
					desc: '话题描述7',
					news_count: 10,
					today_count: 10
				}, {
					cover: '/static/demo/topicpic/9.jpeg',
					title: '话题名称8',
					desc: '话题描述8',
					news_count: 10,
					today_count: 10
				}, {
					cover: '/static/demo/topicpic/10.jpeg',
					title: '话题名称9',
					desc: '话题描述9',
					news_count: 10,
					today_count: 10
				}, {
					cover: '/static/demo/topicpic/11.jpeg',
					title: '话题名称10',
					desc: '话题描述10',
					news_count: 10,
					today_count: 10
				}]
			}
		},
		onLoad() {
			let systemInfo = uni.getSystemInfoSync()
			this.scrollH = systemInfo.windowHeight - systemInfo.statusBarHeight - 44
			this.list = demo
		},
		methods: {
			openAddInput() {
				uni.navigateTo({
					url: '../add-input/add-input'
				});
			},
			// 切换选项卡
			changeTab(index) {
				this.tabIndex = index
			},
			// 滑动
			onChangeTab(e) {
				this.tabIndex = e.detail.current
			},
			// 顶踩操作
			doSupport(e) {
				let item = this.list[e.index]
				let msg = e.type === 'support' ? '顶' : '踩'
				if (item.support.type === '') {
					item.support.type = e.type
					item.support[e.type + '_count']++
				}
				// 之前已经顶过了
				else if (item.support.type === 'support' && e.type === 'unsupport') {
					item.support.unsupport_count++
					item.support.support_count--
				}
				// 之前已经踩过了
				else if (item.support.type === 'unsupport' && e.type === 'support') {
					item.support.support_count++
					item.support.unsupport_count--
				}
				item.support.type = e.type
				uni.showToast({
					title: msg + '成功'
				});
			},
			loadmoreEvent() {
				if (this.loadmore !== '上拉加载更多') return
				this.loadmore = '加载中...'
				setTimeout(() => {
					this.list = [...this.list, ...this.list]
					this.loadmore = '上拉加载更多...'
				}, 2000)
			},
			openSearch() {
				uni.navigateTo({
					url: '../search/search?type=topic'
				});
			}
		}
	}
</script>

<style>

</style>
